<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi">
	<meta charset="UTF-8">
	<title>金币充值</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/shoping.css">
	<link rel="stylesheet" href="css/chongZhi.css">
	<script src="js/jquery.min.js"></script>
</head>
<body>
	<!-- 头部可复用样式 -->
	<header>
		<img src="images/guanbi.png" alt="关闭">
		<p>水站商城</p>
		<img src="images/gengduo.png" alt="更多">
	</header>
	<!-- 修改地址title1 -->
	<div class="title">
		<a href="javascript:history.back(-1);">
			<img src="images/1-2返回.png" alt="">
		</a>
		<span>金币充值</span>
	</div>
	<!-- 充值区 -->
	<div class="chongzhiqu">
		<p>请选择或者输入金额</p>
		<div class="btn_group">
			<button>100</button>
			<button>500</button>
			<button class="active">1000</button>
		</div>
		<div class="btn_group">
			<button>2000</button>
			<button>5000</button>
			<button>1万</button>
		</div>
		<input type="text" placeholder="请输入金额">
		<p>注: 1金币=1元</p>
		<p>可购买金币: <span>1300</span>个</p>
	</div>
	<!-- 说明区 -->
	<div class="shuoming">
		<p>充值活动说明</p>
		<p>1、充1000，赠300金币;</p>
		<p>2、活动期间:2017-03-01 至 2017-03-31</p>
	</div>
	<!-- 底部 -->
	<button class="zhifu" onclick="javascript:window.location.href='zhifu.html'">去支付</button>
	<script>
		$(function(){
			$('.btn_group button').click(function(event) {
				$('.btn_group button').removeClass('active');
				$(this).addClass('active');
			});
		})
	</script>
</body>
</html>